<template>
  <div class="m-5 p-5 bg-white">
    <div style="max-width: 930px" class="m-auto">
      <div class="text-right">
        <el-button type="primary" @click="open">编辑</el-button>
        <el-button type="danger">删除</el-button>
      </div>
      <h2>学习完该文章安全分可得2分</h2>
      <el-divider />
      <img src="/study.png" class="w-full" alt="" />
      <el-divider />
      答题

      <div class="flex m-auto">
        <!-- <div class="w-52" style="margin: 0 auto">
          <h4>已读人员</h4>
          <el-tree :data="data" default-expand-all />
        </div> -->
        <!-- <div class="bg-slate-100 w-3 mx-5"></div> -->
        <div class="w-52 m-auto">
          <h4>未读人员</h4>
          <el-tree :data="data" default-expand-all show-checkbox />
          <!-- <br />
          扣分
          <el-input-number style="width: 120px" :model-value="1" />
          <div class="text-right mt-5">
            <el-button type="primary">确认</el-button>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ElMessageBox } from "element-plus"

const open = () => {
  ElMessageBox.prompt("学习完成可得分", "编辑", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    inputErrorMessage: "1"
  })
    .then(({ value }) => {})
    .catch(() => {})
}
const data = [
  {
    label: "一车间",
    children: [
      {
        label: "二班组",
        children: [
          {
            label: "张三"
          }
        ]
      }
    ]
  },
  {
    label: "二车间",
    children: [
      {
        label: "一班组",
        children: [
          {
            label: "李四"
          }
        ]
      }
    ]
  }
]
</script>
<style lang="scss" scoped></style>
